<template>
  <el-row class="row-header">
    <div class="hearder-header">
      <ul class="ul-header">
        <li class="li-header">猫眼电影</li>
        <li class="title-header activte">即将上映</li>
        <li class="more-header"><a style="color: #fff" href="https://maoyan.com/">全部></a></li>
      </ul>
    </div>
    <div class="row-content">
      <el-carousel indicator-position="none" :loop="false">
        <el-carousel-item style="display: flex" v-for="(item,index) in pages" :key="index">
            <Movies style="cursor:pointer;" v-for="itemm in item" :img="itemm" :key="itemm.index"></Movies>
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-row>
</template>
<script>
import Movies from "../../com/movie";
export default {
  data () {
    return {
      movie: [
        {
          index: 0,
          img: '//p0.meituan.net/movie/fcabb91dbae511e8a32af1deeb0c1cec204154.jpg@214w_297h_1e_1c',
          personNum: 32934,
          moviename: '大红包'
        },
        {
          index: 1,
          img: '//p1.meituan.net/movie/51d3b0c39d082db32c3534cb68338b441447222.png@214w_297h_1e_1c',
          personNum: 13789,
          moviename: '灰烬重生'
        },
        {
          index: 2,
          img: '//p0.meituan.net/movie/a06c36755e3e4e902235e9904cc1551b4677926.jpg@214w_297h_1e_1c',
          personNum: 10968,
          moviename: '印度奇游'
        },
        {
          index: 3,
          img: '//p0.meituan.net/moviemachine/0c3f4cd8caf0f0848a54e3081349bdac22615677.jpg@214w_297h_1e_1c',
          personNum: 32934,
          moviename: '魔法学院'
        },
        {
          index: 4,
          img: '//p1.meituan.net/movie/b907eadfcafa0bd594b3d4e44952c9cc18752.jpg@214w_297h_1e_1c',
          personNum: 8053,
          moviename: '今生只为遇见你'
        },
        {
          index: 5,
          img: '//p1.meituan.net/moviemachine/1d2b4985d0187b437d41a73994ba2e191607376.jpg@214w_297h_1e_1c',
          personNum: 6238,
          moviename: '奇妙王国之魔法奇缘'
        },
        {
          index: 6,
          img: '//p0.meituan.net/movie/81fe2197ef930c79624a28cc76c423835264620.png@214w_297h_1e_1c',
          personNum: 5696,
          moviename: '小公主艾薇拉与神秘王国2'
        },
        {
          index: 7,
          img: '//p0.meituan.net/movie/1907a5af889e44236fd80952980d36e13257090.jpg@214w_297h_1e_1c',
          personNum: 3965,
          moviename: '82号古宅'
        },
        {
          index: 8,
          img: '//p1.meituan.net/movie/174c45cf85694f065224ee38b29282903015976.jpg@214w_297h_1e_1c',
          personNum: 1385,
          moviename: '愤怒的心'
        },
        {
          index: 9,
          img: '//p1.meituan.net/moviemachine/e10ceb90d2c06d3524d01d573ccf88fb7514998.jpg@214w_297h_1e_1c',
          personNum: 15439,
          moviename: '金禅降魔'
        }
      ]
    }
  },
  components: {
    Movies
  },
  computed: {
    pages () {
      let pages = []
      this.movie.forEach((item,index) => {
        let num = Math.floor(index / 5)
        if (!pages[num]) {
          pages[num] = []
          pages[num].push(item)
        } else {
          pages[num].push(item)
        }
      })
      return pages
    }
  }
}
</script>
<style scoped lang="scss">
.row-header{
  padding-left: 20px;
  margin-top: 40px;
}
.hearder-header{
  width: 100%;
  height: 44px;
  background: linear-gradient(to right, rgb(250, 60, 104) 2%, rgb(254, 70, 77) 97%) rgb(250, 60, 104);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.ul-header{
  color: #fff;
  line-height: 44px;
  li {
    list-style: none;
    margin-left: 5px;
    margin-right: 5px;
    float: left;
    position: relative;
    cursor: pointer;
  }
}
.li-header{
  font-size: 18px;
  cursor: none;
  margin-left: 20px !important;
  margin-right: 15px !important;
}
.activte{
  &:after{
    position: absolute;
    content: "";
    border-left: 5px solid transparent;
    border-bottom: 7px solid #fff;
    border-right: 5px solid transparent;
    display: block;
    width: 2px;
    top: 37px;
    right: 0;
    left: 0;
    margin: auto;
  }
}
.title-header{
  font-size: 14px;
}
.more-header {
  font-size: 14px;
  float: right !important;
  padding-right: 5px;
  margin-right: 20px;
}
.row-content{
  /*border: 1px solid #999999;*/
  border-top: none;
  padding-top: 5px;
}
</style>
